import { Collapse } from 'antd';
import React from 'react';

import { AllPanel } from './Components/AllPanel/AllPanel';
import { Task1Panel } from './Components/Task1Panel/Task1Panel';
import { Task2Panel } from './Components/Task2Panel/Task2Panel';
import { Task3Panel } from './Components/Task3Panel/Task3Panel';

import styles from './Content.module.scss';

/* -------------------------------------------------------------------------- */
/*                                  COMPONENT                                 */
/* -------------------------------------------------------------------------- */

export const Content = React.memo<Props>(() => (
  <div className={styles.wrap}>
    <Collapse>
      <Collapse.Panel key="all" header="Рейтинг стран мира по количеству патентов в 2012 г.">
        <AllPanel />
      </Collapse.Panel>

      <Collapse.Panel key="1" header="Какая страна имеет наивысший рейтинг" extra="Задание 1">
        <Task1Panel />
      </Collapse.Panel>

      <Collapse.Panel
        key="2"
        header={
          'В какой стране процент заявок резидентов выше 50% относительно всех поданных заявок (\u00A0вывести упорядоченный по алфавиту список стран\u00A0)'
        }
        extra="Задание 2"
      >
        <Task2Panel />
      </Collapse.Panel>

      <Collapse.Panel
        key="3"
        header={
          'Выдать информацию о том, на сколько заявок на патент подано больше в первых двух странах, относительно других (\u00A0результат дать в процентах\u00A0)'
        }
        extra="Задание 3"
      >
        <Task3Panel />
      </Collapse.Panel>
    </Collapse>
  </div>
));

/* -------------------------------------------------------------------------- */
/*                                 / COMPONENT                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                    TYPES                                   */
/* -------------------------------------------------------------------------- */

interface Props {}

/* -------------------------------------------------------------------------- */
/*                                   / TYPES                                  */
/* -------------------------------------------------------------------------- */
